<script setup lang="ts">

import {isEmptyString} from "@/utils/string";
import {getDownloadUrl} from "@/api/file";
import {formatDateStr} from "@/utils/time";
import {ArticleRecentResp} from "@/api/article/types";

defineProps<{
  articleList: ArticleRecentResp[]
}>()
</script>

<template>
<div>
  <div class="bg-white px-5 py-4 rounded-lg mb-6 ">
    <h3 class="widget-title font-bold">最近文章</h3>
    <ul class="mt-2 recent-article-ul">
      <li v-for="article in articleList" class="recent-article-item ">
        <div class="flex flex-row article-item-row h-[80px]">
          <!--封面-->
          <div v-if="!isEmptyString(article.coverImage)"
               class="w-1/3 h-full shrink-0 rounded-lg overflow-hidden">
            <RouterLink class="guide-a" :to="'/article/detail/' + article.id">
              <el-image :src="getDownloadUrl(article.coverImage)" fit="cover"
                        class="article-item-image h-full w-full "></el-image>
            </RouterLink>
          </div>
          <div class="recent-article-item-content ml-5">
            <!--标题-->
            <RouterLink class="guide-a" :to="'/article/detail/' + article.id"><h4
                class="article-item-title text-base text-black mb-3 line-clamp-2" :title="article.title">
              {{ article.title }}</h4></RouterLink>
            <div class="article-item-meta flex flex-row text-sm">
              <div class="text-gray-400">
                {{ formatDateStr(article.publishedTime, '{y}年{m}月{d}日') }}
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>
</template>

<style scoped>
.recent-article-item-content {
  display: grid;
  grid-template-rows: auto 24px;
  row-gap: 0;
  width: 100%;
}

.recent-article-item {
  border-bottom: 1px dashed var(--el-border-color);
  padding: 12px 0;
}

.recent-article-ul .recent-article-item:last-child {
  border-bottom: 0;
}

.recent-article-item-content {
  display: grid;
  grid-template-rows: auto 24px;
  row-gap: 0;
  width: 100%;
}

.article-item-image {
  transition: transform 0.5s ease;
}

.article-item-image:hover {
  transform: scale(1.1);
}
</style>